<!--  -->
<script setup>
import { useBreadsStore } from '@/stores'
import { format, timeAgo } from '@/utils/time'

defineProps(['userInfo'])

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([
  { title: '个人主页', path: '/users/settings' },
  { title: '概览' }
])
</script>

<template>
  <div class="view-container">
    <div class="body">
      <div class="intro">
        {{ userInfo.user.intro || '// HELLO WORLD' }}
      </div>
    </div>
    <div class="footer">
      <div class="state">
        <span>加入于 {{ format(userInfo.user.createAt, 'YYYY 年 MM 月 DD 日') }}</span>
        <span v-if="!userInfo.user.lastLoginAt">从未登录</span>
        <span v-else>上次在线 {{ timeAgo(userInfo.user.lastLoginAt) }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.view-container {
  display: flex;
  flex-direction: column;
  flex: 1;

  .body {
    flex: 1;
  }

  .intro {}

  .state {
    display: flex;
    gap: 2em;
    color: grey;
  }
}
</style>
